<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="500" style="background-color: #FFFFFF;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Set styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '28px Arial';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';

    // --- Draw Wire P ---
    const p_x = 180;
    const p_y = 220;
    const radius = 14;

    // Draw the circle
    ctx.beginPath();
    ctx.arc(p_x, p_y, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the cross (X) inside the circle
    const crossOffset = radius * Math.cos(Math.PI / 4);
    ctx.beginPath();
    ctx.moveTo(p_x - crossOffset, p_y - crossOffset);
    ctx.lineTo(p_x + crossOffset, p_y + crossOffset);
    ctx.moveTo(p_x + crossOffset, p_y - crossOffset);
    ctx.lineTo(p_x - crossOffset, p_y + crossOffset);
    ctx.stroke();

    // --- Draw Label Line and Text ---
    const labelLineStartX = p_x + crossOffset;
    const labelLineStartY = p_y - crossOffset;
    const labelLineEndX = 350;
    const labelLineEndY = 100;
    
    ctx.beginPath();
    ctx.moveTo(labelLineStartX, labelLineStartY);
    ctx.lineTo(labelLineEndX, labelLineEndY);
    ctx.stroke();

    ctx.fillText('wire P', labelLineEndX + 10, labelLineEndY - 5);
    ctx.fillText('current into page', labelLineEndX + 10, labelLineEndY + 30);

    // --- Draw Figure Label ---
    ctx.font = 'bold 28px Arial';
    ctx.fillText('Fig. 6.1', 150, 400);

</script>
</body>
</html>